<template>
  <div class="login-container">
    <div class="box-item desc">
      <div class="welcome">
        <div class="title">
          <div>Hi,你好！</div>
          <div>欢迎来到管理后台</div>
        </div>
        <div style="width: 196px;height: 1px;background: #ffffff;margin-top:20px;margin-bottom:45px;"></div>
        <div style="font-size: 28px;color: rgba(162,194,221,1);">智慧乡村后台，为乡村发展注入智慧力量。</div>
      </div>
    </div>
    <div class="box-item login">
      <LoginForm class="m-auto h-auto p-25px lt-xl:(rounded-3xl light:bg-white)" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { underlineToHump } from '@/utils'
import { useDesign } from '@/hooks/web/useDesign'
import { useAppStore } from '@/store/modules/app'
import { LoginForm } from './components'

defineOptions({ name: 'Login' })

const appStore = useAppStore()
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('login')
</script>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100%;
  background: url(/@/assets/imgs/login/login-bg5.jpg) no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .box-item {
    width: 444px;
    height: 499px;

    &.desc {
      /* box-shadow: 0px 16px 73px 8px rgba(203, 203, 203, 0.2);*/
      padding: 23px 0;
      width: 700px;
    }

    &.login {
      background: #ffffff;
      border-radius: 5px;
      padding: 23px 23px;
      position: relative;
      margin-right: 7%;
    }

    .welcome {
      margin: 13% 0;
      color: #ffffff;
      .title {
        height: 175px;
        line-height: 85px;
        font-size: 48px;
      }
    }
  }
}
</style>
